<template>
  <div class="checkbox-table">

    <div class="checkbox-group">
      <el-checkbox-group v-model="checkList"
                         @change="changeOptions">
        <el-checkbox v-for="(item, index) in checkboxData"
                     :label="item.value"
                     :key="index">{{item.label}}</el-checkbox>
      </el-checkbox-group>
    </div>
    <el-table :key="key"
              :data="tableData"
              :header-cell-style="{background:'#F2F2F8',color:'#37393F'}"
              highlight-current-row
              style="width: 100%">
      <el-table-column type="index">
      </el-table-column>
      <el-table-column prop="date"
                       label="日期">
      </el-table-column>
      <el-table-column prop="name"
                       label="姓名">
      </el-table-column>
      <el-table-column prop="age"
                       label="年龄">
      </el-table-column>
      <el-table-column prop="province"
                       label="省会">
      </el-table-column>
      <el-table-column prop="city"
                       label="城市">
      </el-table-column>
      <el-table-column prop="zip"
                       label="学号">
      </el-table-column>
      <el-table-column prop="tag"
                       label="标签">
      </el-table-column>
      <el-table-column v-for="(item, index) in formThead"
                       :key="index"
                       :label="item.label">
        <template slot-scope="scope">
          {{ scope.row[item.value] }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang='ts'>
import { Component, Vue, Watch } from 'vue-property-decorator'
@Component({
  name: 'checkbox-table'
})
export default class extends Vue {
  key = 0
  // 复选框数据 value一定要跟列表数据中的字段一样
  checkboxData: any[] = [
    { value: 'address', label: '家庭地址' },
    { value: 'school', label: '所读学校' },
    { value: 'major', label: '专业' },
    { value: 'phone', label: '联系电话' }
  ]

  // 已选中的表头
  formThead: any[] = []
  checkList: any[] = []
  // 列表数据
  tableData: any[] = [
    {
      date: '2016-05-02',
      name: '王小虎',
      age: 20,
      province: '上海',
      city: '普陀区',
      address: '上海市普陀区金沙江路 1518 弄',
      zip: 200333,
      tag: '家',
      school: '重庆大学',
      major: '软件工程',
      phone: '13446578900'
    },
    {
      date: '2019-05-04',
      name: '小小',
      age: 18,
      province: '北京',
      city: '燕郊区',
      address: '北京燕郊区166路',
      zip: 200333,
      tag: '家里',
      school: '清华大学',
      major: '软件工程',
      phone: '13467679811'
    },
    {
      date: '2020-05-01',
      name: '小虎',
      age: 19,
      province: '上海',
      city: '普陀区',
      address: '上海市普陀区金沙江路 9999 弄',
      zip: 200333,
      tag: '家',
      school: '上海理工大学',
      major: '软件工程',
      phone: '13467679866'
    },
    {
      date: '2016-05-03',
      name: '旺旺王',
      age: 18,
      province: '上海',
      city: '普陀区',
      address: '上海市普陀区金沙江路 1516 弄',
      zip: 200333,
      tag: '公司',
      school: '北京大学',
      major: '软件工程',
      phone: '13467679855'
    }
  ]

  @Watch('checkList', { immediate: true, deep: true })
  onCheckList (val: any[]) {
    this.formThead = this.checkboxData.filter((i) => val.indexOf(i.value) >= 0) // 挑选被选中的对象
    this.key = this.key + 1 // 为了保证table 每次都会重渲，这样做体验感更好，如果不为table设置key值的话，用户一旦选中了复选框选项，就是在原来table基础上添加删除每一列，页面就有跳动的感觉，体验感不好
  }

  changeOptions (params: any) {
    console.log(params)
  }
}
</script>

<style lang="scss" scoped>
.checkbox-group {
  margin: 15px 0;
}
</style>
